<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--
    业务场景：
         当点击页面按钮时，打开一个新的标签页，例如音乐播放，
         当播放音乐时，打开新标签跳转到播放页面，当打开另一
         首歌时，在新打开的标签页会接受到参数进行播放

-->

<div class="music">
    <button class="item">open</button>
    <button class="item">open</button>
    <button class="item">open</button>
    <button class="item">open</button>
</div>

<script>
    // 方案一
    // 缺点：这里不会重复打开新标签，但是在点击的时候，会刷新页面标签聚焦到b页面
    // var btn = document.querySelectorAll(".item");
    // for (var i = 0; i < btn.length; i++) {
    //     btn[i].onclick = function () {
    //         var url = "b.html?id=" + i;
    //         window.open(url, "music");
    //     }
    // }

//     方案二
    // 哪些标签能接受消息
    //  同源、同频道
    const btns = document.querySelectorAll(".item");
    const channel = new BroadcastChannel("music")
    for (let i = 0; i < btns.length; i++) {
        btns[i].onclick = function () {

            const url = "b.html?id=" + i;
            // 判断是否有标签页
            const music = localStorage.getItem("music");

            if(music===null||music===0){
                // 没有标签页，可以通过localStorage来判断，也可以通过这个发消息去判断
                localStorage.setItem("music",1)
                window.open(url, "music");
            }else{
                console.log('执行了',music)
                channel.postMessage(i)
            }
        }
    }
</script>
</body>
</html>